<template>
  <div id="writerEditor">
      <div id="myToolbar" ref="myToolbar"></div>
      <div id="myText" ref="myText">初始内容</div>
      <!-- <div class="fengmian" ref="fengmian" v-html="mouldHtml"></div> -->
      <button @click="submitHandler">确认</button>
    
  </div>
</template>

<script>
import E from "wangeditor";
import { uploadImg, initEditor } from "@/util/editor_public";
import { transfer } from "@/request/api";
export default {
  name: "writeEditor",
  data() {
    return {
      index: 1,
      editor: null,
      mouldHtml: "",
    };
  },
  created() {},
  mounted() {
    this.editor = new E(this.$refs.myToolbar, this.$refs.myText);
    console.log(process.env.VUE_APP_API_URL, "环境");
    initEditor(this.editor, {
      height: 600,
      placeholder: "自定义 placeholder 提示文字",
      onchangeTimeout: 1000,
      pasteFilterStyle: false,
      uploadImgServer: process.env.VUE_APP_API_URL + "/common/upload",
    });
    uploadImg(this.editor);
    // 配置 onchange 回调函数
    this.editor.config.onchange = function (newHtml) {
      // console.log("change 之后最新的 html", newHtml);
    };
    let clickHandler = function (e) {
         console.log('编辑区域点击',e,e.target.innerText);
       
    }
    this.editor.txt.eventHooks.clickEvents.push(clickHandler);
  },
  beforeDestroy() {
    // 销毁编辑器
    this.editor.destroy();
    this.editor = null;
  },
  methods: {
    submitHandler() {
      // console.log(this.editor.txt.html());
      transfer({ htmlContent: this.editor.txt.html() });
      // let arr = [];
      // console.log(
      //   this.$refs.fengmian.getElementsByTagName("input") ||
      //     this.$refs.fengmian.getElementsByTagName("select")
      // );
      // arr = [
      //   ...this.$refs.fengmian.getElementsByTagName("input"),
      //   ...this.$refs.fengmian.getElementsByTagName("select"),
      // ];
      // console.log(arr);
      // for (let index = 0; index < arr.length; index++) {
      //   console.log(arr[index].tagName, arr[index].name, arr[index].value);
      //   arr[index].value = arr[index].value;
      // }
      // console.log(this.$refs.fengmian.innerHTML);
      // let html = this.$refs.fengmian.innerHTML;
      // this.mouldHtml = "";
      // setTimeout(() => {
      //   console.log("<<<");
      //   this.mouldHtml = html;
      // }, 1000);
    },
  },
};
</script>
<style>
.w-e-toolbar {
  z-index: 2 !important;
}
.w-e-menu {
  z-index: 2 !important;
}
.w-e-text-container {
  z-index: 1 !important;
}
</style>
<style lang="scss" scoped>
#writerEditor {
    width: 960px;
    #myToolbar {
      width: 100%;
      margin: 0 auto;
      border: 1px solid #ccc;
      padding: 6px 4px;
    }
    #myText {
      margin: 12px auto 10px;
      border: 1px solid #ccc;
      width: 80%;
      height: 500px;
    }
    .fengmian {
      overflow-y: auto;
      margin: 12px auto 10px;
      border: 1px solid #ccc;
      width: 80%;
      height: 300px;
    }
  
}
</style>